<template>
  <div id="single-choice"
      class="task-single-choice judge">
      <!-- 每个单选 -->
      <div class="task-single-main"
          :id="'judge'+opIndex"
          v-for="(option,opIndex) in FormData.judgeData"
          :key="opIndex">
      <div class="back">
      <!-- 本题预览 -->
      <div class="task-single-body">
          <!-- 题干 -->
          <p class="task-single-p p">
          {{opIndex+1}}.{{option.subject}} {{'('+option.score+'分)'}}
          <el-button v-if="!option.isEdit" @click="isEditStatus(option)" type="primary" icon="el-icon-edit" plain>编辑</el-button>
          <el-button v-if="option.isEdit"  @click="isEditStatus(option)" type="success" icon="el-icon-edit" plain>完成</el-button>
          </p>
          <!-- 选项 -->
          <!-- <div class="task-single-option option"
            v-for="(choice,chIndex) in option.options"
            :key="chIndex">
            <el-radio
                class="task-el-radio task-el-single-option"
                v-model="FormData.sigleData[opIndex].answer">
                {{ choiceList[chIndex] + ". "
                +choice}}
            </el-radio>
            <br>
          </div> -->
          <div class="task-single-option option" @click.passive="nullEvent()">
            <el-radio
              class="task-el-radio task-el-single-option" 
              :id="'radio'+opIndex"
              v-model="FormData.judgeData[opIndex].answer" 
              @click="()=>{}"
              :label="1">对</el-radio>
            <br>
            <el-radio class="task-el-radio task-el-single-option" v-model="FormData.judgeData[opIndex].answer" :label="0">错</el-radio>
            <br>
          </div>
          
      </div>
      <!-- 设计栏 -->
      <el-collapse-transition>
      <div class="task-single-design design" v-show="option.isEdit">
          <!-- 题干设计 -->
          <div class="task-design-title">
            <div class="task-title-edit">题目编辑</div>
            <div class="task-single-design-title">
              <!-- <div style="min-width:62px;">题干： </div> -->
              <el-input
                  type="textarea"
                  :autosize="{minRows:4}"
                  class="task-el-input "
                  style="width:100%;"
                  v-model="option.subject" 
                  :placeholder="'请填写题目'">
              </el-input>
            </div>
          </div>
          <div class="task-single-design-options-div">
          <!-- 选项设计 -->
          <div class="task-single-design-options-box">
              <div class="task-single-control-message ">选择判断题答案</div>
              <div class="task-single-design-options">
                <el-radio class="task-el-radio task-el-single-option" v-model="FormData.judgeData[opIndex].answer" :label="1">对</el-radio>
              </div>
              <div class="task-single-design-options">
                <el-radio class="task-el-radio task-el-single-option" v-model="FormData.judgeData[opIndex].answer" :label="0">错</el-radio>
              </div>
              <!-- <div style="min-width:22px;">
                {{choiceList[chIndex]}}：
                </div>
                <el-input
                    type="textarea"
                    :autosize="{minRows:2}"
                    class="task-el-input
                        task-single-design-options-input"
                    v-model="option.options[chIndex]" 
                    :placeholder="'请输入选项 '+choiceList[chIndex]+' 的内容'">
                </el-input>
                <el-button  
                  @click="deleteOption(option.options,chIndex,'option')" 
                  circle 
                  slot="reference"
                  type="danger" 
                  style="border:0;margin-left:20px;"
                  icon="el-icon-delete" 
                  title="删除此选项" /> -->
          </div>
          <!-- 控制栏 -->
          <div class="task-single-control">
              <div class="task-single-control-message ">控制栏</div>
              <div class="control">
                  <div class="control-updown control-box">
                    <el-button type="primary" title="上移" @click="moveQuestion(FormData,opIndex, 'up')">上移</el-button>
                    <el-button type="primary" title="下移" @click="moveQuestion(FormData,opIndex, 'down')">下移</el-button>
                  </div>
                  <div class="control-savedelete control-box">
                    <el-button 
                      type="warning" 
                      title="从试卷中删除此题" 
                      @click="deleteQuestion(FormData.judgeData,option,opIndex)">
                      删除
                    </el-button>
                    <el-button 
                      type="info" 
                      title="添加到单选题库" 
                      >收藏
                    </el-button>
                  </div>
                  <div class="control-updown control-box">
                    <el-button 
                      type="primary" 
                        title="添加选项" 
                        @click="importQuestionBank(option,opIndex)">
                        导入
                    </el-button>
                    <el-button 
                      type="primary" 
                      title="在此处添加一个判断题" 
                      @click="addJudge(opIndex)">加题</el-button>
                  </div>
                  <!-- <div class="control-savedelete control-box display-none">
                    <el-button type="warning" title="隐形" icon="el-icon-delete"/>
                    <el-button type="info" title="隐形" icon="el-icon-star-off"/>
                  </div> -->
                  <div class="control-updown control-box score">
                    <span>
                      分值：
                    </span>
                    <el-input 
                      type="number" 
                      title="分值" 
                      icon="el-icon-plus" 
                      v-model="option.score">
                      <span slot="suffix" style="color:#409eff;">分</span>
                    </el-input>
                  </div>
                  <!-- <div class="control-updown control-box">
                      <el-button type="primary" title="下移" icon="el-icon-sort-down" />
                      <el-button type="primary" title="上移" icon="el-icon-sort-up" />
                  </div>
                  <div class="control-savedelete control-box">
                      <el-button type="warning" title="删除" icon="el-icon-delete"/>
                      <el-button type="info" title="添加到单选题库" icon="el-icon-star-off"/>
                  </div>
                  <div class="control-updown control-box">
                      <el-button type="primary" title="下移" icon="el-icon-sort-down" />
                      <el-button type="primary" title="上移" icon="el-icon-sort-up" />
                  </div>
                  <div class="control-savedelete control-box">
                      <el-button type="warning" title="删除" icon="el-icon-delete"/>
                      <el-button type="info" title="添加到单选题库" icon="el-icon-star-off"/>
                  </div>
                  <div class="control-updown control-box">
                      <el-button type="primary" title="下移" icon="el-icon-sort-down" />
                      <el-button type="primary" title="上移" icon="el-icon-sort-up" />
                  </div>
                  <div class="control-savedelete control-box">
                      <el-button type="warning" title="删除" icon="el-icon-delete"/>
                      <el-button type="info" title="添加到单选题库" icon="el-icon-star-off"/>
                  </div> -->
              </div>
          </div>
          </div>
      </div>
      </el-collapse-transition>
      </div>
      <!-- 题目分割线 -->
      <div class="hr" v-if="opIndex!=FormData.judgeData.length-1"/>
  
      </div>
      <div class="task-single-problom-editer">
      </div>
      <a :href="href" target="_bl" ref="href"></a>
  </div>
</template>

<script>
import {judgeData} from '../../javascript/formatData'
export default {
  name: 'judge',
  props: ['FormData'],
  data () {
    return {
      href: '',
      choiceList: ['A', 'B', 'C', 'D', 'E', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z']
      // singleData: []
    }
  },
  mounted () {
    this.$emit('singleAnswer', 1)
  },
  methods: {
    isEditStatus (option) {
      option.isEdit = !option.isEdit
    },
    // 导入题库
    importQuestionBank (option, opIndex) {
    },
    nullEvent () {},
    deleteQuestion (ArrayData, option, opIndex) {
      console.log(ArrayData, option, opIndex)
      ArrayData.splice(opIndex, 1)
    },
    // 添加判断题
    addJudge (opIndex) {
      // this.FormData.judgeData.splice(opIndex + 1, 0, {
      //   id: 'J-202106060001',
      //   // 题目
      //   subject: '',
      //   // 多选选项
      //   options: null,
      //   // 答案
      //   answer: 1,
      //   // 考生的答案
      //   studentAnswer: '',
      //   // 解析
      //   analysis: '',
      //   // 分值
      //   score: ''
      // })
      this.FormData.judgeData.splice(opIndex + 1, 0, JSON.parse(JSON.stringify(judgeData)))
      setTimeout(() => {
        document.getElementById('judge' + (opIndex + 1)).scrollIntoView({ block: 'start', behavior: 'smooth' })
      }, 200)
    },
    // 打开删除按钮， 删除选项
    deleteOption (option, optionIndex, type) {
      const options = {
        design: () => {
        },
        option: () => {
          console.log(option, optionIndex, type)
          option.splice(optionIndex, 1)
          console.log(option)
        }
      }
      options[type]()
    },
    // 添加选项按钮
    // addOption (option, optionIndex) {
    //   this.FormData.judgeData[optionIndex].options.push('')
    // },
    addOption (option, opIndex, chIndex) {
      // this.FormData.singleData[opIndex].options.push('')
      this.FormData.judgeData[opIndex].options.splice(chIndex, 0, '')
    },
    // 移动 点击的题 的位置
    // arr 点击的位置 移动的方式
    moveQuestion (ArrayData, singleIndex, type) {
      console.log(singleIndex)
      // console.log(ArrayData, singleIndex, type)
    //   if (index1 > index2) {
    //       console.log('已经是最后一个，没法再向下移动了！')
    //     } else if (index1 < index2) {
    //       console.log('已经是第一个了，没法再向上移动了！')
    //     }
    //   }
      const options = {
        'down': () => {
        //   console.log(singleIndex, ArrayData.sigleData.length)
          if (singleIndex + 1 === ArrayData.judgeData.length) {
            this.$message.warning('已经是最后一题个，没法再向下移动了')
            return console.log('last')
          }
          this.swapArray(ArrayData.judgeData, singleIndex, singleIndex + 1)
          setTimeout(() => {
            document.getElementById('judge' + (singleIndex + 1)).scrollIntoView({ block: 'start', behavior: 'smooth' })
          }, 200)
        },
        'up': () => {
          if (singleIndex === 0) {
            this.$message.warning('已经是第一个了，没法再向上移动了！')
            return console.log('first')
          }
          this.swapArray(ArrayData.judgeData, singleIndex, singleIndex - 1)
          setTimeout(() => {
            document.getElementById('judge' + (singleIndex - 1)).scrollIntoView({ block: 'start', behavior: 'smooth' })
          }, 200)
        }
      }
      options[type]()
    },
    swapArray (arr, index1, index2) {
      arr[index1] = arr.splice(index2, 1, arr[index1])[0]
    }
  }
}
</script>

<style lang="less" scoped>
</style>
<style lang="less">
.el-input::-webkit-outer-spin-button,
.el-input::-webkit-inner-spin-button {
  margin: 0;
  -webkit-appearance: none !important;
}
 
.el-input input[type="number"]::-webkit-outer-spin-button,
.el-input input[type="number"]::-webkit-inner-spin-button {
  margin: 0;
  -webkit-appearance: none !important;
}
 
/*在firefox下移除input[number]的上下箭头*/
.el-input {
  -moz-appearance: textfield;
}
 
.el-input input[type="number"] {
  -moz-appearance: textfield;
}
</style>